<template>
	<gui-page ref="guipage" :apiLoadingStatus="apiLoadingStatus" :refresh="true" @reload="reload" :loadmore="true"
		@loadmorefun="getData">
		<view slot="gBody">
			<view class="data-m">
				<gui-empty v-if="noData">
					<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="gui-empty-img" src="../../static/noImg.png" mode="widthFix"></image>
					</view>
					<text slot="text" class="gui-text gui-block-text gui-text-center gui-margin-top"
						style="color:#666;padding: 0 100rpx;">暂无数据...</text>
				</gui-empty>
				<view class="list bgfff">
					<view class="item" v-for="(item,index) in dataList" :key="item.id" @tap="handleOpen(index)">
						<view class="title flex-ac-jb" :class="{'primary-color':currentIndex==index}">
							<text class="f24">{{item.title}}</text>
							<text class="gui-icons">&#xe601;</text>
						</view>
						<view class="desc radius10" :class="{'descCheck':currentIndex==index}">
							<text v-html="item.content"></text>
							<!-- <text
								class="f22">当客户的疑问或问题无法使用准备好的常见问题解答、说明手册或聊天机器人解决时，会建立一个流程，提示客户支持台直接与公司互动来解决问题。对于不太复杂的查询，您可以在使用客户支持之前解决它们。</text> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		</view>
	</gui-page>
</template>

<script>
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				totalPage: 1,
				apiLoadingStatus: false,
				dataList: [], //数据
				noData: false,
				currentIndex: -1
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			handleOpen(idx) {
				this.currentIndex = this.currentIndex == idx ? -1 : idx
			},
			getData: function(isReload) { //数据
				this.apiLoadingStatus = true;
				console.log('加载函数运行，页码 : ' + this.pageNum);
				this.$http.get('/api/helpCenter', {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					let result = res.data
					console.log('列表', result)
					this.totalPage = Math.ceil(res.total / this.pageSize);
					if (this.pageNum >= 2) {
						this.dataList = this.dataList.concat(result);
						// 加载完成后停止加载动画
						this.$refs.guipage.stoploadmore();
						// 假定加载了全部数据，通知组件不再加载更多
						if (this.pageNum >= this.totalPage) {
							this.$refs.guipage.nomore();
						}
					}
					// 第一页 有可能是第一次加载或者刷新
					else {
						this.dataList = [];
						this.dataList = result;
						this.noData = result.length ? false : true;
						// 刷新
						if (isReload) {
							this.$refs.guipage.endReload();
						}
					}
					this.pageNum++;
					this.apiLoadingStatus = false;
				})
			},
			reload: function() {
				this.pageNum = 1;
				this.getTechnician(true);
				this.$refs.guipage.endReload();
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #fff;
	}

	.list {
		border-top: 4px solid #F9F9F9;
		padding: 35rpx 30rpx;

		.item {
			padding: 12rpx 0;

			.title {
				transition: all .2s;
			}

			.primary-color {
				.gui-icons {
					transform: rotate(90deg);
					transition: all .2s;
				}
			}

			.desc {
				margin-top: 18rpx;
				max-height: 0;
				overflow: hidden;

				text {
					display: inline-block;
					padding: 20rpx;
					background: #F5F5F5;
					line-height: 40rpx;
				}
			}

			.descCheck {
				max-height: 1000px;
				transition: all .5s linear;
			}
		}
	}
</style>